---
title: gluestack-ui BottomSheet Component | Installation, Usage, and API

description: The bottomsheet component is simpler implementation of gorhom bottomsheet.

pageTitle: BottomSheet

pageDescription: The bottomsheet component is simpler implementation of gorhom bottomsheet.

showHeader: true

tag: alpha
---

import { Meta } from '@storybook/addon-docs';

<Meta title="with-nativewind/Components/Disclosure/BottomSheet" />

import {
  BottomSheet,
  BottomSheetBackdrop,
  BottomSheetContent,
  BottomSheetDragIndicator,
  BottomSheetItem,
  BottomSheetItemText,
  BottomSheetPortal,
  BottomSheetTrigger,
  Text
} from '../../core-components/nativewind';

import {
  AppProvider,
  CodePreview,
  Table,
  TableContainer,
  InlineCode,
  Tabs
} from '@gluestack/design-system';
import { transformedCode } from '../../utils';
import Wrapper from '../../core-components/nativewind/Wrapper';
import { CollapsibleCode } from '@gluestack/design-system';

<br />

## Installation

<Tabs value="cli" type="section">
  <Tabs.TabList>
      <Tabs.Tab value="cli">
        <Tabs.TabTitle>CLI</Tabs.TabTitle>
      </Tabs.Tab>
     <Tabs.Tab value="manual">
        <Tabs.TabTitle>Manual</Tabs.TabTitle>
     </Tabs.Tab>
  </Tabs.TabList>
  <Tabs.TabPanels>
    <Tabs.TabPanel value="cli">
<>

### Run the following command:
  ```bash
  npx gluestack-ui add bottomsheet
  ```

> Note: you need to install specific versions of `@gorhom/bottom-sheet@5.0.0-alpha.10 (v5)`, `react-native-reanimated` version `~3.6.2` and `react-native-gesture-handler` version `~2.14.0`.

</>
    </Tabs.TabPanel>
    <Tabs.TabPanel value="manual"> 
<>


### Step 1: Install the following dependencies:

```bash
npm i @gorhom/bottom-sheet@alpha react-native-reanimated@~3.6.2 react-native-gesture-handler@~2.14.0
```

> Note: you need to install specific versions of `@gorhom/bottom-sheet@alpha (v5)`, `react-native-reanimated` version `~3.6.2` and `react-native-gesture-handler` version `~2.14.0`.


### Step 2: Copy and paste the following code into your project.

<CollapsibleCode>

```jsx 
%%-- File: core-components/nativewind/bottomsheet/index.tsx --%% 
```

</CollapsibleCode>


### Step 3: Wrap your App or layout with GestureHandlerRootView.

```jsx

import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* content */}
    </GestureHandlerRootView>
  );
}

```

for more info follow their [installation instructions.](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation)

### Step 4: Update the import paths to match your project setup.

</>
    </Tabs.TabPanel>
  </Tabs.TabPanels>
</Tabs>

## API Reference

To use this component in your project, include the following import statement in your file.

```jsx

import {
  BottomSheet,
  BottomSheetBackdrop,
  BottomSheetContent,
  BottomSheetDragIndicator,
  BottomSheetItem,
  BottomSheetItemText,
  BottomSheetPortal,
  BottomSheetTrigger,
} from '@/components/ui/bottomsheet';

```

```jsx
export default () => (
   <BottomSheet>
      <BottomSheetTrigger>
        <Text>Open BottomSheet</Text>
      </BottomSheetTrigger>
      <BottomSheetPortal
        snapPoints={['25%', '50%']}
        backdropComponent={BottomSheetBackdrop}
        handleComponent={BottomSheetDragIndicator}
      >
        <BottomSheetContent>
          <BottomSheetItem>
            <BottomSheetItemText>Item 1</BottomSheetItemText>
          </BottomSheetItem>
          <BottomSheetItem>
            <BottomSheetItemText>Item 2</BottomSheetItemText>
          </BottomSheetItem>
          <BottomSheetItem>
            <BottomSheetItemText>Item 3</BottomSheetItemText>
          </BottomSheetItem>
        </BottomSheetContent>
      </BottomSheetPortal>
    </BottomSheet>
);
```

### Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

#### BottomSheet

It is a context provider for entire bottomsheet api.

### Props

<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Prop</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Type</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Default</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Description</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>snapToIndex</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>number</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>1</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`index of snapPoints at which bottomsheet initially opens.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>onOpen</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>() => void</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`callback function which trigger when bottomsheet is opens.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>onClose</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>() => void</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`callback function which trigger when bottomsheet is closed.`}</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>


#### BottomSheetTrigger

It inherits all the properties of React Native's [pressable](https://reactnative.dev/docs/pressable) component.


#### BottomSheetPortal

it's a gorhom BottomSheet component. inherits all the properties of [gorhom BottomSheet](https://ui.gorhom.dev/components/bottom-sheet/props#configuration).

<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Prop</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Type</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Default</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Description</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>snapPoints</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Array<string | number>`}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Points for the bottom sheet to snap to. It accepts array of number, string or mix. String values should be a percentage.`}</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>

#### BottomSheetContent

It inherits all the properties of [gorhom BottomSheetView](https://ui.gorhom.dev/components/bottom-sheet/components/bottomsheetview).

#### BottomSheetItem

It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.

#### BottomSheetItemText

It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.

#### BottomSheetTextInput

It inherits all the properties of [gorhom BottomSheetTextInput](https://ui.gorhom.dev/components/bottom-sheet/components/bottomsheettextinput).

#### BottomSheetScrollView

It inherits all the properties of [gorhom BottomSheetScrollView](https://ui.gorhom.dev/components/bottom-sheet/components/bottomsheetscrollview).

#### BottomSheetFlatList

It inherits all the properties of [gorhom BottomSheetFlatList](https://ui.gorhom.dev/components/bottom-sheet/components/bottomsheetflatlist).

#### BottomSheetSectionList

It inherits all the properties of [gorhom BottomSheetSectionList](https://ui.gorhom.dev/components/bottom-sheet/components/bottomsheetsectionlist).